<template>
	<view class="">
		<!-- 使用自定义导航组件 -->
		<custom-navbar title="课程页"></custom-navbar>
	</view>
	<view class="bg-course">

		<!-- 课程模块 start -->
		<view class="function-course">
			<view class="function-course-box" v-for="item in courseList" :key="item.id">
				<view class="function-course-box-img">
					<image class="function-course-box-img-img" :src="item.img" mode="">
					</image>
				</view>
				<view class="function-course-box-text">
					<view class="function-text-box-text-title">
						{{item.title}}
					</view>
					<view class="function-course-box-text-label-button">
						{{item.teacher}}
					</view>
					<view class="function-course-box-text-label">
						<view class="function-course-box-text-label-two">
							￥
							<text class="function-course-box-text-label-two-text">{{item.price}}</text>
						</view>
						<view class="function-course-box-text-label-three">
							{{item.class}}节
						</view>
					</view>

				</view>
			</view>
		</view>

		<!-- 课程模块 end -->
	</view>
</template>

<script>
	import customNavbar from '../../components/custom-navbar/custom-navbar.vue';
	import {
		getBanner
	} from '../../api/api.js'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	// 定义一个响应式变量（如果需要search功能）
	// const search = ref('')

	export default {
		data() {
			return {
				// 轮播图数据
				courseList: [{
						id: 1,
						title: '顺义后沙峪咨询室1',
						teacher: '亚瑟·弗里曼博士',
						class: '38',
						img: "https://www.iepsy.com/static/img/logo.png",
						price: '39.00',
						url: 'https://www.iepsy.com/'
					},
					{
						id: 2,
						title: '顺义后沙峪咨询室1',
						teacher: '亚瑟·弗里曼博士',
						class: '38',
						img: "https://www.iepsy.com/static/img/logo.png",
						price: '39.00',
						url: 'https://www.iepsy.com/'
					},
					{
						id: 3,
						title: '顺义后沙峪咨询室1',
						teacher: '亚瑟·弗里曼博士',
						class: '38',
						img: "https://www.iepsy.com/static/img/logo.png",
						price: '39.00',
						url: 'https://www.iepsy.com/'
					}

				],

			}
		},
		methods: {

		}
	}
</script>

<style>
	/* 背景页 start */
	.bg-course {
		margin-top: 192rpx;
		background-color: #f5f5f5;
		padding: 20rpx 0rpx 20rpx;
	}

	/* 背景页 end */
	/* 机构课程模块样式 start */
	.function-course {
		width: 720rpx;
		background-color: #fff;
		margin: 5rpx auto 5rpx;
		overflow: hidden;
		box-sizing: border-box;
		border-radius: 35rpx;
		overflow: hidden;
		padding: 5rpx 20rpx;
	}

	.function-course-box {
		width: 100%;
		height: 285rpx;
		display: flex;
		justify-content: space-between;
		padding: 20rpx 25rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #f5f5f5;
	}

	.function-course-box-img {
		width: 45%;
		height: 235rpx;
		overflow: hidden;
		border-radius: 35rpx;
		display: flex;
		justify-content: center;
		/* 水平居中 */
		align-items: center;
		/* 垂直居中 */

	}

	.function-course-box-img-img {

		max-width: 100%;
		max-height: 100%;
	}

	.function-course-box-text {
		width: 55%;
		padding-left: 25rpx;
	}

	.function-text-box-text-title {
		height: 80rpx;
		font-size: 35rpx;
		padding: 20rpx 0rpx 20rpx 20rpx;

	}


	.function-course-box-text-label {
		width: 100%;
		padding: 10rpx 20rpx;
		display: flex;
		justify-content: flex-start;
	}

	.function-course-box-text-label-two {
		    font-size: 25rpx;
		    padding: 0rpx 15rpx;
		    border-right: 1rpx solid #bbb;
		    color: red;
		    margin-right: 10rpx;
	}

	.function-course-box-text-label-two-text {
		font-size: 37rpx;
		font-weight: 550;
	}

	.function-course-box-text-label-three {
		font-size: 27rpx;
		padding: 0rpx 10rpx;
		align-self: flex-end;

	}

	.function-course-box-text-label-one-img {
		width: 30rpx;
		height: 30rpx;
	}

	.function-course-box-text-label-button {
		float: left;
		padding: 10rpx 20rpx;
		background-color: #f5f5f5;
		color: #707070;
		display: inline-block;
		/* border-radius: 25rpx; */
		font-size: 25rpx;
		margin: 5rpx 15rpx 10rpx 30rpx;
	}

	/* 机构课程模块样式 end */
</style>